
<template>
    <div class="sortContainer" :style="'min-height: ' + docheight + 'px'">
      <div v-if="!showTimeOut">
        <div class="sortList">
            <div class="sortNav">
                <div class="sortNavItem sortOrderNum">会员列表</div>
                <div class="sortNavItem">到期时间</div>
            </div>
            <div :class="index==0?'sortItem noBorder':'sortItem'" :key="index" v-for="(item,index) in integalArr">
                <div class="userInfo">
                    <img class="userImg" :src="item.head_img+ossSrc" />
                    <div class="userName">
                        <div class="userNameVal">{{ item.nick_name }}</div>
                        <div class="memberNum">享{{ item.member_discount/10 }}折</div>
                    </div>
                </div>
                <div class="userMoney">{{ item.member_expiration_time }}</div>
            </div>
            <div class="loadMore" v-if="integalArr.length>0">{{ loadMoreText }}</div>
            <nodata v-if="integalArr.length==0" text="暂无会员充值记录"></nodata>
        </div>
      </div>
      <toast
        v-model="showToast"
        position="middle"
        width="50%" type="text"
        :time="1000"
        >{{ showText }}</toast
      >
      <sub-load v-if="showLoad"></sub-load>
      <getLoad v-if="!showCont"></getLoad>
      <getTimeOut v-if="showTimeOut"></getTimeOut>
    </div>
  </template>
  
  <script>
  import { Toast } from "vux";
  import subLoad from "@/components/public/subLoad.vue";
  import getLoad from "@/components/public/getLoad";
  import getTimeOut from "@/components/public/getTimeOut";
  import nodata from '@/components/public/nodata'

  import { member_user } from "@/http/api";
  export default {
    components: {
      getLoad,
      getTimeOut,
      subLoad,
      Toast,
      nodata
    },
    data() {
      return {
        showTimeOut: false,
        showCont: false,
        showLoad: false,
        showText: "",
        showToast: false,
        integalArr:[],
        page: 1,
        per_page: 10,
        last_page: 0,
        getting: false,
        loadMoreText:'数据加载中~',
        
      };
    },
    props: {},
    methods: {
      getData() {
        let data = {
          page: this.page,
          per_page: this.per_page,
        };
        member_user(data)
          .then(res => {
            this.showCont = true;
            if (res.data.code == 1) {
              let arr = res.data.data.data
              this.total_money = res.data.data.total_money
                for(let i=0;i<arr.length;i++){
                  this.integalArr.push(arr[i])
                }
                setTimeout(() => {
                  this.getting = false
                }, 100);
                this.last_page = res.data.data.last_page
                if(this.page==this.last_page){
                  this.loadMoreText = '到底啦～'
                }else{
                  this.loadMoreText = '数据加载中~'
                }
            } else {
              this.showToast = true;
              this.showText = "数据获取失败";
            }
          })
          .catch(() => {
            this.showTimeOut = true;
            this.showCont = true;
          });
      },
      nextfn() {
        if (this.$route.path == "/menberUser") {
          let h =
            document.documentElement.scrollHeight || document.body.scrollHeight;
          let wh =
            document.documentElement.clientHeight || document.body.clientHeight;
          let top = document.documentElement.scrollTop || document.body.scrollTop;
          let bottom = h - wh - top;
          if (bottom <= 50) {
            if (this.getting == false) {
              if (this.last_page > this.page) {
                this.getting = true;
                this.page++;
                this.getData();
              }
            }
          }
        }
      }
    },
    mounted() {
      window.addEventListener("scroll", this.nextfn);
    },
    created() {
      this.getData()
    }
  };
  </script>
  
  <style scoped lang="less">
  .sortContainer{
    box-sizing: border-box;
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
    background-color: #edf2ff;
    width: 100%;
    
    .sortList{
            width: 92%;
            background-color: #fff;
            
            border-radius: 0.5rem ;
            padding: 0.75rem 4%;
            margin: 0 auto;
            box-sizing: border-box;
            .sortNav{
                display: flex;
                align-items: center;
                padding: 0.75rem 0;
                justify-content: space-between;
                font-size: 0.7rem;
                font-weight: bold;

                .sortOrderNum{
                    width: 3rem;
                    text-align: center;
                }
            }
            .sortItem{
                width: 100%;
                padding: 0.5rem 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-top: 1px dashed #6d94f8;
                .sortItemNum{
                    width: 3rem;
                    color: #999;
                    text-align: center;
                    font-size: 0.8rem;
                    font-weight: bold;
                }
                .userInfo{
                    display: flex;
                    width: 2rem;
                    align-items: center;
                    flex: 1;
                    font-size: 0.7rem;
                    font-weight: bold;
                    img{
                        margin-right: 0.75rem;
                        border-radius: 50%;
                        height: 2rem;
                    }
                    .userName{
                        height: 2rem;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        .memberNum{
                            font-size: 0.6rem;
                            font-weight: normal;
                            color: #6d94f8;
                        }
                    }
                }
                .userMoney{
                    color: #6d94f8;
                    // font-size: 0.8rem;
                }
            }
            .loadMore{
              text-align: center;
              padding: 0.75rem 0;
              font-size: 0.6rem;
              color: #6d94f8;
            }
            .noBorder{
                border-top: none;
            }
        }
  }
  </style>
  <style>
 
  </style>